<template>
  <div class="swiper-i" v-if="swiperList.length">
	  <uv-swiper :list="swiperList" :autoplay="false" :current="currentNum"
      :circular="true"
	  radius="0"
	   interval="5000"
	   imgMode="aspectFill"
	   keyName="url"
	   height="554rpx" circular  @change="e => currentNum = e.current" @click="clickSwiper">
			<template v-slot:indicator>
				<view class="indicator">
					<view class="indicator__dot" 
						v-for="(item, index) in swiperList" 
						:key="index" 
						:class="[index === currentNum && 'indicator__dot--active']"  
					></view>
				</view>
			</template>
     </uv-swiper>
	<div class="circle circle-left" v-if="swiperList.length>1" @click="clickSwiperArrow('left')">
		<div class="bg"></div>
		<div class="swiper-ind">
			<uv-icon name="arrow-left" color="#fff" size="28"></uv-icon>
		</div> 
	</div>
	<div class="circle circle-right" v-if="swiperList.length>1" @click="clickSwiperArrow('right')"> 
		<div class="bg"></div>
		<div class="swiper-ind">
			<uv-icon name="arrow-right" color="#fff" size="28"></uv-icon>
		</div>    
	</div>
  </div>
</template>
<script setup>
import { useUserStore } from "@/stores";
const userStore = useUserStore();
const { userId } = storeToRefs(userStore);
const props=defineProps({
	swiperList: {
	  type: Array,
	  default: () => [],
	},
})
const currentNum=ref(0);
const clickSwiper=(i)=>{
	const {jumpType,path}=props.swiperList[i];
	if(jumpType=='MP'){
		//跳转小程序
		wx.navigateToMiniProgram({
		  appId: path,
		  path: '',
		  // extraData: {
		  //   foo: 'bar'
		  // },
		  //envVersion: 'develop',
		  success(res) {
		    // 打开成功
		  }
		})
	}
	if(jumpType=='PT'){
		//跳转富文本页面--id=xxx
		if(userId.value){
			uni.navigateTo({
				url:`/pages/subPackageA/pictureCardsDetail/index?id=${path}`
			})
		}else{
			uni.navigateTo({
				url:'/pages/subPackageA/login/index'
			})
		}
		 
	}
	 
}
const clickSwiperArrow=(label)=>{
	switch(label){
		case 'left':
		if(currentNum.value>0){
			currentNum.value--
		}
		break;
		case 'right':
	    if (currentNum.value < props.swiperList.length - 1) {
		  currentNum.value++;
		}
		break;
		default:
		break
	}
	 
}
const switchSwiper=(index)=>{
	currentNum.value=index;
}
</script>

<style lang="scss" scoped>
.swiper-i {
	position:relative;
  width: 100%;
  height: 554rpx;
}
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.indicator {
		@include flex(row);
		justify-content: center;
		&__dot {
			height: 8px;
			width: 8px;
			border-radius: 50%;
			background-color: rgba(140, 136, 137);
			margin: 0 5px;
			transition: background-color 0.3s;
			&--active {
				background-color: #ff9800;
			}
		}
	}
.circle{
	.bg{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		background:#000;
		opacity: 0.5;
		z-index:10;
		border-radius:50%;
	}
	.swiper-ind{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		z-index:20;
	}
	&-left{
		position:absolute;
		top:50%;
		left:30rpx;
		transform: translate(0,-50%);
		z-index:50;
		width:100rpx;
		height:100rpx;
	}
	&-right{
		position: absolute;
		top:50%;
		right:30rpx;
		transform: translate(0,-50%);
		z-index:50;
		width:100rpx;
		height:100rpx;
	}
} 
</style>
